<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="exercise">
    <!-- 1) Fill the <p> below with your Name and Age - using Interpolation -->
    <p>VueJS is pretty cool - {{ myself.name }} ({{ myself.age }})</p>
    <!-- 2) Output your age, multiplied by 3 -->
    <p>Age * 3 = {{ myself.age * 3 }}</p>
    <!-- 3) Call a function to output a random float between 0 and 1 (Math.random()) -->
    <p>{{ generateRandom() }}</p>
    <!-- 4) Search any image on Google and output it here by binding the "src" attribute -->
    <div>
        <img style="width: 100px; height: 100px" v-bind:src="imgLink">
    </div>
    <!-- 5) Pre-Populate this input with your name (set the "value" attribute) -->
    <div>
        <input type="text" v-bind:value="myself.name">
    </div>
</div>

<script>
    new Vue({
        el: '#exercise',

        data: {
            myself: {
                name: 'Shinn',
                age: 21,
            },
            imgLink: 'https://avatars.githubusercontent.com/zhanglianxin',
        },

        methods: {
            generateRandom() {
                return Math.random() * 1;
            },
        },
    });
</script>
